{% load i18n static sass_tags sekizai_tags %}{% spaceless %}

{% if pagination == "paginator" %}
	{% addtoblock "css" %}<link href="{% sass_src 'shop/css/prevent-widows.scss' %}" rel="stylesheet" type="text/css" />{% endaddtoblock %}

	{% if paginator.display_page_controls %}
<nav ng-if="catalog.count===undefined" class="mb-3" aria-label="{% trans "Page navigation" context "catalog" %}">
	<ul class="pagination justify-content-center">{{ paginator.to_html }}</ul>
</nav>
	{% endif %}

{% else %}
	{% addtoblock "js" %}<script src="{% static 'node_modules/angular-inview/angular-inview.js' %}" type="text/javascript"></script>{% endaddtoblock %}
	{% add_data "ng-requires" "angular-inview" %}

	{% if paginator.display_page_controls %}
<nav ng-if="catalog.count===undefined" class="mb-3" aria-label="{% trans "Page navigation" context "catalog" %}">
	<ul class="pagination justify-content-center"{% if pagination != "paginator" %} in-view="$inview && loadMore()"{% endif %}>{{ paginator.to_html }}</ul>
</nav>
	{% endif %}

<div ng-if="catalog.count>0" class="text-center mb-3" ng-cloak>
	<span class="btn btn-outline-dark" ng-if="isLoading">
		{% trans "Loading more products" context "catalog" %}&emsp;<i class="fa fa-spinner fa-spin"></i>
	</span>
	<span ng-if="!isLoading">
	{% if pagination == "auto" %}
		<i in-view="$inview && loadMore()">&nbsp;</i>
	{% else %}
		<button type="button" class="btn btn-outline-secondary" ng-hide="catalog.products.length==catalog.count" ng-click="loadMore()">
			{% trans "Load more products" context "catalog" %}
		</button>
	{% endif %}
	</span>
</div>
<div ng-if="catalog.count===0" class="text-center mb-3" ng-cloak>
	<span class="btn btn-outline-dark">{% trans "No products found" context "catalog" %}</span>
</div>

{% endif %}

{% endspaceless %}
